<template>
  <div class="nav-scroller py-1 mb-2">
    <nav class="nav d-flex justify-content-between">
      <a class="p-2" href="javascript:;" :class="{'active': active === nav.type}"
        v-for="(nav, index) in navs" :key="index" @click="changed(nav, index)">
        {{nav.title}}
      </a>
    </nav>
  </div>
</template>
<script>
export default {
  name: 'blog-nav',
  title: '博客导航',
  data() {
    return {
      navs: [
        { title: '全部', type: 'all' },
        { title: 'JavaScript', type: 'JavaScript' },
        { title: 'Linux', type: 'Linux' },
        { title: 'Go', type: 'Go' },
        { title: 'Python', type: 'Python' },
        { title: 'Java', type: 'Java' },
        { title: 'C language', type: 'C' },
        { title: 'C++', type: 'C++' },
        { title: 'Ruby', type: 'Ruby' },
        { title: 'Html+Css', type: 'Html' },
        { title: 'Nodejs', type: 'Nodejs' },
        { title: 'Vue', type: 'Vue' },
        { title: 'react', type: 'react' },
      ]
    }
  },
  mounted() {
    console.log('blog-nav===blog-nav');
  },
  methods: {
    changed(nav, index) {
      if (nav.type !== this.active) {
        this.$emit('change', nav)
        const { query } = this.$route
        this.$router.push({name: 'blog-type', params: {type: nav.type}, query})
      }
    }
  },
  computed: {
    active() {
      return this.$route.params.type
    }
  }
}
</script>